<template>
    <div class="email">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="(item,i) in newsList" :key="i">
          <router-link :to="'/email/newsinfo/'+ i">
            <img class=" mui-pull-left" :src="rootUrl+item.plate1_img">
            <div class="mui-media-body">
              <h1>{{item.title}}</h1>
              <h1>{{"内容:"+item.title_banner_txt_content}}</h1>
              <span>{{"发布的时间:"+item.title_banner_txt_time}}</span>
            </div>
          </router-link>>
        </li>
      </ul>
    </div>
</template>

<script>
  import {Toast} from 'mint-ui';
    export default {
      data(){
        return{
          newsList:[],
          rootUrl:"http://psrecycle.oss-cn-hangzhou.aliyuncs.com/recycle/idcard/",
        }
      },
      methods:{
        getList(){
          this.$http.get("http://118.25.40.54:3000/apitext")
            .then(info=>{
              if(info.body!==undefined)
              {
                this.newsList = info.body.data;
                console.log(this.newsList)
              }else{
                Toast("获取数据失败...");
              }
            })
        }
      },
      created() {
        this.getList();
      }


    }
</script>

<style scoped>
  a{
    text-decoration: none;
  }
 .email{
   margin-top: 140px;
   width: 100%;
   height: 100%;
 }
 body > div > div > ul > li{
   width: 100%;
   height: 200px;

 }
 body > div > div > ul > li > a{

   /*border: 1px solid blue;*/
   height: 200px;

 }
 .mui-ellipsis{
   display: flex;
   justify-content: space-between;
   color: #007aff;
 }
  body > div > div > ul > li > a > div > h1:nth-child(1){
    margin: 10px;
    font-size: 40px;
    color: #007aff;
  }

 body > div > div > ul > li > a > div > p{
   font-size: 40px;
   line-height: 80px;


 }

  body > div > div > ul > li > a > div > h1:nth-child(2){
     margin: 15px;
    font-size:50px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

  }
  body > div > div > ul > li > a > div > span{
    font-size: 40px;
    margin: 15px;
  }

  body > div > div > ul > li > a > img{
    width: 150px;
    height:150px;
  }


</style>